<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j con-box page-uc-address">
    <!-- 删除地址弹窗 -->
    <div
      v-if="showDelete"
      class="popup-mask"
    />
    <div
      v-if="showDelete"
      class="popup-box"
      :style="$t('language') === 'en'?'min-width: 510px':''"
    >
      <div class="tit">
        <div class="text">
          {{ $t('tips') }}
        </div>
        <div
          class="close"
          @click="showDelete = false"
        />
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-icon warning" />
          <div class="tip-info">
            <div class="result">
              {{ $t('address.deleteShippingAddress') }}
            </div>
            <div class="date">
              {{ $t('address.deleteShippingTips') }}
            </div>
            <div class="btns">
              <a
                href="javascript:void(0)"
                class="btn-r"
                @click="deleteAddr()"
              >{{ $t('delete') }}</a>
              <a
                href="javascript:void(0)"
                class="btn-g"
                @click="showDelete = false"
              >{{ $t('cancel') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除地址弹窗 -->
    <div class="add-address">
      <a
        v-if="showAddBtn"
        href="javascript:void(0)"
        class="add-btn"
        @click="showAddOrUpdateDialog(0)"
      >{{ $t('address.createdTips5') }}</a>
      <div class="add-limit">
        {{ $t('address.createdTips1') }}
        <span class="number">{{ userAddressList.length }}</span>{{ $t('address.createdTips2') }}
        <span class="number">10</span>{{ $t('address.createdTips3') }}
      </div>
    </div>
    <div
      v-if="userAddressList.length"
      class="address-list"
    >
      <div
        v-for="item in userAddressList"
        :key="item.addrId"
        class="item"
        :class="{ 'default-address': item.commonAddr }"
      >
        <div class="item-row">
          <div class="name">
            {{ item.receiver }}
          </div>
          <div class="phone-number">
            {{ item.mobile }}
          </div>
          <a
            href="javascript:void(0)"
            class="default-btn"
            @click="setDefault(item.addrId)"
          >{{ item.commonAddr ? $t('address.default') : $t('address.setDefault') }}</a>
          <div class="action-box">
            <span
              class="edit"
              @click="showAddOrUpdateDialog(1,item.addrId)"
            />
            <span
              class="delete"
              @click="showDeleteDialog(item.addrId)"
            />
          </div>
        </div>
        <div
          class="address-detail"
        >
          {{ item.province + ' ' + item.city + ' ' + item.area + item.addr }}
        </div>
      </div>
    </div>
    <empty-all-tips
      v-else
      :text="$t('address.notAddAdress')"
      :src-type="5"
    />
    <add-or-edit-address
      v-if="showAdd"
      ref="addOrUpdateRef"
      :edit-addr-id="editAddrId"
      @toggle-addr-pop="refreshChange"
    />
  </div>
</template>

<script setup>
import { _debounce } from '@/utils/index.js' // 防抖
import Cookie from 'vue-cookies'
import { ElMessage } from 'element-plus'

const showAddBtn = ref(false)
onMounted(() => {
  // 设置网页标题
  document.title = $t('address.receivingAddress')
  getUserAddr() // 获取用户地址信息
  if (Cookie.get('bbcToken')) {
    showAddBtn.value = true
  }
})

const userAddressList = ref([]) // 地址信息
/**
 * 获取用户地址信息
 */
const getUserAddr = () => {
  http.get('/p/address/list').then(({ data }) => {
    userAddressList.value = data
  })
}

const editAddrId = ref(0)
const showAdd = ref(false)
// 新增获取修改地址
const showAddOrUpdateDialog = (st, addId) => {
  if (st === 0) {
    if (userAddressList.value.length === 10) {
      ElMessage({
        message: $t('address.createdTips4'),
        type: 'warning',
        duration: 1000
      })
      return
    }
  }
  editAddrId.value = addId
  showAdd.value = true
}

/**
 * 设为默认地址
 */
const setDefault = (addrId) => {
  http.put('/p/address/defaultAddr/' + addrId).then(() => {
    http.get('/p/address/list').then(({ data }) => {
      userAddressList.value = data
    })
  })
}

/**
 * 刷新回调
 */
const refreshChange = (visible) => {
  showAdd.value = visible
  // 获取用户地址信息
  http.get('/p/address/list').then(({ data }) => {
    userAddressList.value = data
  })
}

const showDelete = ref(false)
const deleteId = ref(0)
/**
 * 删除地址
 */
const showDeleteDialog = (addrId) => {
  showDelete.value = true
  deleteId.value = addrId
}

const deleteAddr = _debounce(() => {
  http.delete('/p/address/deleteAddr/' + deleteId.value).then(() => {
    http.get('/p/address/list').then(({ data }) => {
      userAddressList.value = data
      showDelete.value = false
    })
  })
}, 800)

</script>

<style lang="scss" scoped>
@use "index";
</style>
